<template>
    <IContent v-model="componentProps" :loading="loading">
        <ISearch v-model="search">
            <Row>
                <FormItem label="客户状态">
                    <RemoteButton url="common/select/dictionaries/CUSTOMER_STATUS" v-model="search.status" size="small" @on-change="getLists(1)"></RemoteButton>
                </FormItem>
            </Row>
            <FormItem label="客户名称">
                <Input v-model="search.name" placeholder="客户名称" size="small"></Input>
            </FormItem>
            <FormItem :label-width="1">
                <ButtonGroup>
                    <Button type="primary" icon="ios-search" size="small">搜索</Button>
                    <Button type="success" icon="ios-add" size="small" @click="openComponent(`ICreate`)">添加</Button>
                </ButtonGroup>
            </FormItem>
        </ISearch>

        <ITable :current="page.current" :table="table" :total="page.total" @on-page-change="pageChange">
            <template slot-scope="{ row, index }" slot="action">
                <ButtonGroup>
                    <Button type="warning" size="small" @click="openComponent('IUpdate', {id: row.id})">编辑</Button>
                    <Button type="warning" size="small" @click="openComponent('IAccount', {id: row.id})">账号</Button>
                </ButtonGroup>
            </template>
            <template slot-scope="{ row, index }" slot="status">
                <RemoteSpan v-model="row.status" url="common/select/dictionaries/CUSTOMER_STATUS"></RemoteSpan>
            </template>
            <template slot-scope="{ row, index }" slot="url">
                <a target="_blank" :href="`/customer/${row.id}`">/customer/{{row.id}}</a>
            </template>
        </ITable>

        <component slot="component" v-if="componentProps.value" :is="componentProps.view" v-model="componentProps.value"
                   :props="componentProps.props"
                   @input="getLists(page.current)"></component>
    </IContent>
</template>

<script>
    import IContent from "../../../../components/layout/IContent";
    import ISearch from "../../../../components/layout/ISearch";
    import ITable from "../../../../components/layout/ITable";
    import IContentMixins from "../../../../mixins/iContentMixins"
    import RemoteSpan        from "../../../../components/layout/RemoteSpan";
    import RemoteButton from "../../../../components/form/remoteButton";

    export default {
        components: {
            RemoteButton,
            RemoteSpan,
            ICreate: () => import('./create'),
            IUpdate: () => import('./update'),
            IAccount: () => import('./account'),
			ITable, ISearch, IContent
        },
        mixins: [IContentMixins],
        data() {
            return {
                loading: false,
                table: {
                    columns: [
                        {
                            title: '客户名称',
                            key: 'name',
                            width: 250
                        },
                        {
                            title: '客户状态',
                            slot: 'status',
                            width: 200
                        },
                        {
                            title: '请求描述',
                            key: 'remark',
                            tooltip: true,
                            minWidth: 450
                        },
                        {
                            title: '后台地址',
                            slot: 'url',
                            width: 200
                        },
                        {
                            title: '操作',
                            slot: 'action',
                            width: 200
                        }
                    ]
                },
                search: {}
            }
        },methods: {
            getLists(page = 1){
                this._lists(`customer/index`, page);
            }
        }
    }
</script>

<style>
</style>
